<template>
	<view class="content">
		<!-- <view class="header">
			<input type="text" value=""  placeholder="请输入姓名/电话搜索"/>
		</view>
		<view class="locations">
			当前市场
			<view class="loca_aderss">
				<image src="/static/scpf/dingwei%20.png" mode=""></image>  123
			</view>
		</view> -->

		<citySelect @cityClick="cityClick" :formatName="formatName" :hotCity="hotCity" :obtainCitys="obtainCitys"
			:isSearch="true" ref="citys"></citySelect>
	</view>
</template>

<script>
	import citySelect from "@/components/city-select/city-select.vue"
	import citys from './citys.js'
	import requestUrl from '@/index.js';
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				//需要构建索引参数的名称（注意：传递的对象里面必须要有这个名称的参数）
				formatName: 'title',
				//当前城市
				activeCity: {
					id: 0,
					title: ''
				},
				//热门城市
				// hotCity: [
				// 	{
				// 		id: 0,
				// 		title: '南京市'
				// 	},
				// 	{
				// 		id: 1,
				// 		title: '南京市'
				// 	}
				// ],
				//显示的城市数据
				obtainCitys: [
					// {
					// 	id: 0,
					// 	title: '南京'
					// },
					// {
					// 	id: 1,
					// 	title: '北京'
					// },
					// {
					// 	id: 2,
					// 	title: '天津'
					// },
					// {
					// 	id: 3,
					// 	title: '东京'
					// }
				]
			}
		},
		components: {
			citySelect
		},
		async onShow() {
			let res = await this.$request.get(this.$requestUrl.MARKET_LIST_URL, {
				data: {

				}
			});
			
			this.citys = res
			this.$api.msg(res || '系统繁忙，请稍后重试')
		},
		onLoad() {
			//动态更新数据
			setTimeout(() => {

				//修改数据格式
				this.formatName = 'name'
				//修改当前城市
				//修改热门城市
				// this.hotCity = [
				// 	{
				// 		cityName: '南京',
				// 		cityCode: 110100
				// 	},
				// 	{
				// 		cityName: '北京',
				// 		cityCode: 110102
				// 	}
				// ]
				//修改构建索引数据
				this.obtainCitys = this.citys
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '更新数据成功',
				// 	// #ifdef MP-WEIXIN
				// 	duration: 1000,
				// 	// #endif
				// 	mask: true
				// })
			}, 1000)
		},
		methods: {
			...mapMutations(['selectMarket']),
			cityClick(item) {
				this.selectMarket(item)
				
				uni.switchTab({
					url:'../index/index'
				})
				// this.$refs.citys.printAge(item);

			}
		}
	}
</script>

<style>
	.header {
		background-color: #FFFFFF;
		padding: 8rpx 24rpx;
	}

	.header input {

		height: 72rpx;
		border-radius: 36rpx;
		background: url(/static/scpf/sousuo.png) no-repeat;
		background-color: #F4F3F3;
		background-position: 32rpx;
		padding-left: 80rpx;
		outline: none;
	}

	.locations {
		padding: 20rpx 24rpx;
		font-size: 28rpx;
		color: #7B7B7B;
	}

	.loca_aderss {
		width: 306rpx;
		margin: 24rpx;
		padding: 18rpx 24rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		font-size: 32rpx;
		color: #2C2C2D;
		font-weight: 500;

	}

	.loca_aderss image {
		width: 28rpx;
		height: 32rpx;
	}
</style>
